<template>
  <!-- 辖区管理 -- 新增/编辑 -->
  <div>
    <public-modal width="720px" :title="title" :publicVisible="publicVisible" @handleOk="handleOk" @cancel="cancel">
      <div slot="content">
        <a-form-model
          :model="form"
          :rules="rules"
          ref="form"
          class="formStyle"
          autocomplete="off"
          layout="inline"
          :labelCol="{ style: 'width: 80px' }"
        >
          <div class="title">餐厅信息:</div>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item label="餐厅区域">
                <a-select ref="select" style="width: 100%" placeholder="选择区县" @change="getSecondRegionList">
                  <a-select-option v-for="item in region_list" :key="item.id" :value="item.id">
                    {{ item.regionName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="2">
              <div style="line-height: 30px; color: #00edf5">--</div>
            </a-col>
            <a-col :span="10">
              <a-form-model-item>
                <a-select
                  v-model="region_value"
                  ref="select"
                  style="width: 100%"
                  placeholder="选择街道"
                  @change="getRestaurantList"
                  :disabled="region_second_list_disabled"
                >
                  <a-select-option v-for="item in region_second_list" :key="item.id" :value="item.id">
                    {{ item.regionName }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-form-model-item label="餐厅名称" prop="restaurantId">
            <a-select
              ref="select"
              style="width: 100%"
              placeholder="选择餐厅"
              @change="getPoliceList"
              v-model="form.restaurantId"
              :disabled="restaurant_list_disabled"
            >
              <a-select-option v-for="item in restaurant_list" :key="item.id" :value="item.id">
                {{ item.restaurantName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <div class="title">处罚信息:</div>
          <a-form-model-item label="执法队员">
            <div class="flex">
              <div class="addPolice" @click="showAddPolice">
                <span style="font-size: 20px">+</span>
                添加人员
              </div>

              <div class="f1 text-overflow" style="margin-left: 16px; color: #01d1d7; max-width: 400px">
                <span v-for="item in select_list" :key="item">
                  {{ getTagNameByTag(item) }}
                </span>
              </div>
            </div>
          </a-form-model-item>

          <a-form-model-item label="违规时间">
            <start-end-time
              :showTime="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              @timeChange="timeChange"
              :resetTime="resetTime"
            ></start-end-time>
          </a-form-model-item>

          <a-form-model-item label="违规描述" prop="penaltyContent">
            <a-textarea
              :maxLength="200"
              style="height: 80px; overflow: auto; resize: none"
              v-model.trim="form.penaltyContent"
              placeholder="请简要描述餐厅违规行为"
            />
          </a-form-model-item>

          <a-form-model-item label="处罚时间" style="margin-top: 40px" prop="penaltyTime">
            <a-date-picker
              show-time
              :allowClear="false"
              placeholder="请选择时间"
              v-model="form.penaltyTime"
              :disabled-date="disabledDate"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </a-form-model-item>

          <a-form-model-item label="处罚结果" prop="penaltyResult">
            <!-- <a-textarea
              :maxLength="200"
              style="height: 80px; overflow: auto; resize: none"
              v-model="form.penaltyResult"
              placeholder="请填写处罚结果"
            /> -->
            <a-input :maxLength="30" v-model.trim="form.penaltyResult" placeholder="请填写处罚结果" />
          </a-form-model-item>

          <a-form-model-item label="处罚依据" style="margin-top: 20px">
            <span style="color: #03878b">图片数量为1-3张，图片格式为.png/.jpg/.gjpg，图片大小不超过1M。</span>
          </a-form-model-item>

          <div class="input-item flex align-center" style="padding-left: 80px">
            <a-upload
              accept="image/png, image/JPG,image/jpeg"
              list-type="picture-card"
              :file-list="fileList"
              :remove="(e) => remove('fileList', e)"
              @change="(e) => picturesChange('fileList', e)"
              :customRequest="(e) => customRequest('fileList', e)"
              :showUploadList="showUploadList"
            >
              <div v-if="fileList.length < 1"><a-icon type="plus" /></div>
            </a-upload>

            <a-upload
              accept="image/png, image/JPG,image/jpeg"
              list-type="picture-card"
              :file-list="fileList1"
              :remove="(e) => remove('fileList1', e)"
              @change="(e) => picturesChange('fileList1', e)"
              :customRequest="(e) => customRequest('fileList1', e)"
              :showUploadList="showUploadList"
            >
              <div v-if="fileList1.length < 1"><a-icon type="plus" /></div>
            </a-upload>

            <a-upload
              accept="image/png, image/JPG,image/jpeg"
              list-type="picture-card"
              :file-list="fileList2"
              :remove="(e) => remove('fileList2', e)"
              @change="(e) => picturesChange('fileList2', e)"
              :customRequest="(e) => customRequest('fileList2', e)"
              :showUploadList="showUploadList"
            >
              <div v-if="fileList2.length < 1"><a-icon type="plus" /></div>
            </a-upload>
          </div>

          <a-form-model-item label="附件">
            <span style="color: #03878b">支持.DOC/.PDF文件格式，大小30M以内。</span>
          </a-form-model-item>

          <a-upload
            name="file"
            :multiple="false"
            accept=".doc,.docx,.pdf"
            :file-list="fileList3"
            :customRequest="(e) => customRequest('fileList3', e)"
          >
            <!-- @change="(e) => picturesChange('fileList3', e)" -->

            <div class="flex align-center">
              <div class="addPolice" style="margin-left: 80px">
                <span style="font-size: 20px">+</span>
                上传附件
              </div>
              <div v-if="isUploadFile" style="margin-left: 50px; width: 400px" class="text-overflow">
                {{ this.evidenceName + '.' + this.evidenceSuffix }}
              </div>
            </div>
          </a-upload>
        </a-form-model>
      </div>
    </public-modal>
    <add-police ref="addPolice" @success="getSubmitInfo"></add-police>
  </div>
</template>

<script>
import addPolice from './addPolice'
import { personAdd } from '@/api/person'
import { getAction, postAction } from '@/api/manage'
import { uploadUeditorImg } from '@/api/api'
import publicModal from '@/components/publicModal'
import startEndTime from '@/components/startEndTime'
export default {
  components: { publicModal, addPolice, startEndTime },
  name: 'aaaaaaaa',
  data() {
    return {
      form: {},
      title: '新增处罚记录',
      records: {},
      publicVisible: false,
      rules: {
        restaurantId: [{ required: true, message: '请选择餐厅' }],
        penaltyTime: [{ required: true, message: '选择执法队员现场处罚时间' }],
        penaltyContent: [{ required: true, message: '请简要描述餐厅违规行为' }],
        penaltyResult: [{ required: true, message: '请填写处罚结果' }],
      },
      region_value: '',
      region_list: [],
      region_second_list_disabled: true,
      region_second_list: [],
      restaurant_list_disabled: true,
      restaurant_list: [],
      police_list: [],
      select_list: [],
      resetTime: false,
      times: true,

      fileUrl: [],
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [], // 文件上传地址
      isUploadFile: false,
      showUploadList: {
        showPreviewIcon: false,
      },

      evidenceName: '',
      evidenceSuffix: '',
    }
  },

  methods: {
    show(records) {
      this.records = records
      this.publicVisible = true

      // this.getRestaurantList(records.unitId)
      this.getRegionList()
    },

    disabledDate(current) {
      let moment = this.$moment().valueOf()
      return current > moment
    },

    async getRegionList() {
      let { result: region_list } = await getAction('/sys/region/find_region_type_sub_list', { type: 2 })
      this.region_list = region_list
    },

    async getSecondRegionList(parentId) {
      this.region_value = ''
      this.form = {}
      this.resetTime = true
      this.select_list = []
      this.fileUrl = []
      this.fileList = []
      this.fileList1 = []
      this.fileList2 = []
      this.fileList3 = []

      this.restaurant_list_disabled = true

      let { result: region_second_list } = await getAction('/sys/region/find_region_type_sub_list', {
        parentId,
        type: 3,
      })
      this.resetTime = false
      this.region_second_list = region_second_list
      this.region_second_list_disabled = false
    },

    async getRestaurantList(regionId) {
      this.form = {}
      this.resetTime = true
      this.select_list = []
      this.fileUrl = []
      this.fileList = []
      this.fileList1 = []
      this.fileList2 = []
      this.fileList3 = []

      let { result: restaurant_list } = await getAction('/restaurant/select_region_restaurant', { regionId })
      this.resetTime = false
      this.restaurant_list = restaurant_list
      this.restaurant_list_disabled = false
    },

    // getRestaurantId(restaurantId) {},
    async getPoliceList(restaurantId) {
      let { result: police_list } = await getAction('/police/person/find_restaurant_police_person', {
        restaurantId,
      })
      this.police_list = police_list
    },

    getTagNameByTag(id) {
      const foundObject = this.police_list.find((obj) => obj.id == id)
      return foundObject ? foundObject.name : '暂无'
    },

    showAddPolice() {
      if (this.police_list.length == 0) {
        this.$message.error('当前选择区域暂无执法人员，不可添加')
        return
      }
      this.$refs.addPolice.show({ police_list: this.police_list, select_list: this.select_list })
    },

    getSubmitInfo(selectList) {
      this.select_list = selectList
    },

    timeChange(v, index) {
      if (index == 1) {
        this.form.violationStartTime = this.$moment(v).valueOf()
      } else {
        this.form.violationEndTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.form.violationStartTime = null
        this.form.violationEndTime = null
      }
    },

    picturesChange(list, info) {
      info.file.status = 'done'
      this[list] = info.fileList
    },

    remove(list, file) {
      let uid = file.uid
      this[list].findIndex((v) => {
        return v.uid == uid
      })
      this.fileUrl = this.fileUrl.filter((item) => !Object.keys(item).includes(list))
    },

    async customRequest(list, info) {
      // const isLt2M = info.file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   this.$message.error('图片大小不能超过2MB!')
      // }
      // if (isJpgOrPng && isLt2M) {
      // }

      // console.log(list, info.file)
      if (list == 'fileList3') {
        let formData = new FormData()
        formData.append('file', info.file)
        formData.append('type', 13)
        let { result } = await uploadUeditorImg(formData)
        this.isUploadFile = true
        this.form.evidenceName = info.file.name.split('.')[0]
        this.evidenceName = info.file.name.split('.')[0]
        this.evidenceSuffix = info.file.name.split('.')[1]
        this.form.evidenceSuffix = info.file.name.split('.')[1]
        this.form.evidenceSize = (info.file.size / 1024).toFixed(2)
        this.form.evidenceUploadTime = new Date().getTime()
        this.form.evidenceUrl = result.halfPath
      } else {
        let formData = new FormData()
        formData.append('file', info.file)
        formData.append('type', 13)
        // formData.get('file')
        let { result } = await uploadUeditorImg(formData)
        this.fileUrl.push({ [list]: result.halfPath })
      }
    },

    handleOk() {
      this.$refs.form.validate(async (valid) => {
        console.log(valid, 'vvvv')
        if (!valid) return

        if (this.select_list.length === 0) {
          this.$message.error('请选择执法队员')
          return
        }

        if (!this.form.violationStartTime) {
          this.$message.error('请选择违规开始时间')
          return
        }

        if (!this.form.violationEndTime) {
          this.$message.error('请选择违规开始时间')
          return
        }

        if (!this.form.penaltyContent) {
          this.$message.error('请选择违规开始时间')
          return
        }

        if (this.fileUrl.length === 0) {
          this.$message.error('请最少上传一张处罚依据图片')
          return
        }

        if (!this.isUploadFile) {
          this.$message.error('请上传附件')
          return
        }

        this.form.personIdList = this.select_list
        this.form.violationImageList = this.fileUrl.map((obj) => Object.values(obj)[0])
        this.form.penaltyTime = Date.parse(this.form.penaltyTime)

        console.log(this.form, 'this.from')

        let { result } = await postAction('/restaurant/punish_record/punish', this.form)
        this.$message.success('提交成功')
        this.$emit('refresh')
        this.cancel()
      })
    },

    cancel() {
      this.publicVisible = false
      this.form = {}
      this.region_list = []
      this.region_second_list_disabled = true
      this.region_second_list = []
      this.restaurant_list_disabled = true
      this.restaurant_list = []
      this.police_list = []
      this.select_list = []
      this.fileUrl = []
      this.fileList = []
      this.fileList1 = []
      this.fileList2 = []
      this.fileList3 = []
      this.isUploadFile = false
    },
  },
}
</script>

<style>
.ant-upload {
  color: #00f8ff;
}
</style>
<style scoped lang="less">
/deep/ .ant-upload.ant-upload-select-picture-card,
.ant-upload {
  background: #065054;
  border-color: #036265;
  color: #00f8ff !important;
}

.title {
  font-size: 14px;
  font-weight: 500;
  color: #00f8ff;
  margin-bottom: 16px;
}
.addPolice {
  width: 120px;
  height: 42px;
  line-height: 36px;
  background: rgba(15, 117, 120, 0.2588);
  border-radius: 23px;
  border: 1px solid #05767a;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #00f8ff;
  text-align: center;
  cursor: pointer;
}
</style>
